<template>
    <div class="w-full overflow-scroll pl-10" v-if="!pending" style="background-color: var(--boxborder);">
        <div class="h-20 flex">
            <p class="leading-[5rem] text-2xl">{{ list?.artist.name }}</p>
            <p class="ml-5 text-gray-500 leading-[5.5rem]">{{ list?.identify ? list?.identify.imageDesc : '暂无' }}
            </p>
        </div>
        <div class="h-[20rem] w-[60rem] flex my-0 ml-20">
            <img :src="list?.artist.cover" alt="歌手图片" class="w-[16rem] h-[16rem] rounded-lg mt-8 mr-8">
            <div class="mt-8">
                <p class="text-xl ">别名:&emsp;
                    <span class="text-gray-400 text-sm" v-for="item in list?.artist.alias">{{ item }}&emsp;</span>
                </p>
                <p class="text-xl">个人简介:</p>
                <div class="overflow-scroll h-[15rem]">
                    <p style="text-indent: 2rem;color: #888;">
                        {{ introduce[0] }}
                    </p>
                </div>
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="w-full mt-3 bg-gray-50 px-4 rounded-md" style="min-height: 150px;">
            <div class="border-b-[1px] border-gray-300">
                <p>
                    <span class="font-bold leading-8 m-y">歌曲列表</span><span class="ml-2 text-xs">共{{ musicList?.length
                    }}首</span>
                    <span class="float-right font-bold leading-8 " @click="PushInPlayList"
                        style="cursor: pointer;">播放全部</span>
                </p>
            </div>
            <div class="w-full flex text-gray-500 text-sm h-8 mt-2">
                <p class="w-[33%]">歌曲</p>
                <p class="w-[31%]">专辑</p>
                <p class="w-[30%]">歌手</p>
                <p class="w-[4%]">时长</p>
            </div>
            <div v-for="item, index in musicList" class="text-sm h-8 text-gray-500 even:bg-gray-100">
                <PublicMusicItem :name="item.name" :id="item.id" :album="item.al" :singer="item.ar" :index="index"
                    :time="item.dt" @dblclick="PlayMusic(index)" />
            </div>
        </div>
        <div class="h-10  w-full">
        </div>
    </div>
</template>
<script setup lang="ts">
import { usePlayStore } from '~~/store';
import { setIntrduces } from '~~/hook/format';
const store = usePlayStore()
interface info {
    code: number,
    message: string,
    data: {
        identify: {
            imageDesc: string,
        }
        artist: {
            id: string,
            name: string,
            cover: string,
            alias?: string[],
            briefDesc: string,
        }
    }
}
interface musicList {
    code: string,
    message: string,
    data: {
        name: string,
        id: string,
        ar: {
            id: string,
            name: string
        }[],
        al: {
            id: string,
            picUrl: string,
            name: string,
        },
        dt: any
    }[]
}
const router = useRoute()
const { data, pending, refresh } = await useFetch<info>('/api/singer/getIntroduce', { query: { id: router.params.id } })
const list = data.value?.data
const datas = await useFetch<musicList>('/api/singer/getHot', { query: { id: router.params.id } })
const introduce = setIntrduces(list?.artist.briefDesc)
const musicList = datas.data.value?.data
const PushInPlayList = function () {
    if (musicList) {
        let arr = []
        for (let i = 0; i < musicList.length; i++) {
            let tempdata = {
                cover: musicList[i].al.picUrl,
                name: musicList[i].name,
                id: Number(musicList[i].id),
                album: musicList[i].al.name,
                dt: musicList[i].dt,
                singer: musicList[i].ar[0].name
            }
            arr.push(tempdata)
        }
        store.$patch({
            currentMusicIndex: 0,
            playList: arr, playStatus: true,
        })
        store.$patch(() => {
            store.currentId = musicList[0].id
        })
    }
}
const PlayMusic = function (item: number) {
    let arr = []
    if (musicList) {
        for (let i = 0; i < musicList.length; i++) {
            let tempdata = {
                cover: musicList[i].al.picUrl,
                name: musicList[i].name,
                id: Number(musicList[i].id),
                album: musicList[i].al.name,
                dt: musicList[i].dt,
                singer: musicList[i].ar[0].name
            }
            arr.push(tempdata)
        }
        store.$patch({
            currentMusicIndex: item,
            playList: arr, playStatus: true,
        })
        store.$patch(() => {
            store.currentId = musicList[item].id
        })
    }
}
</script>
<style lang="less"></style>